import React, { useState } from 'react'
import { Database, Code, Shield, Activity } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { useIpWhitelist } from '@/hooks/useIpWhitelist'
import KafkaConfig from '@/components/Settings/KafkaConfig'
import KsqlConfig from '@/components/Settings/KsqlConfig'
import IpWhitelistConfig from '@/components/Settings/IpWhitelistConfig'
import toast from 'react-hot-toast'

// 标签页定义
const tabs = [
  {
    id: 'kafka',
    name: 'Kafka配置',
    icon: Database,
    description: 'Kafka集群连接配置'
  },
  {
    id: 'ksql',
    name: 'KSQL配置',
    icon: Code,
    description: 'KSQL流处理配置'
  },
  {
    id: 'whitelist',
    name: 'IP白名单',
    icon: Shield,
    description: 'IP访问控制配置'
  }
]

export default function Settings() {
  const navigate = useNavigate()
  const { isAllowed, isLoading } = useIpWhitelist()
  const [activeTab, setActiveTab] = useState('kafka')

  // IP白名单检查和跳转
  React.useEffect(() => {
    if (!isLoading && isAllowed === false) {
      toast.error('您的IP不在白名单中，无法访问设置页面')
      navigate('/', { replace: true })
    }
  }, [isAllowed, isLoading, navigate])

  // 如果正在检查IP白名单，显示加载状态
  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-center h-64">
          <div className="text-center">
            <Activity className="w-8 h-8 text-blue-500 mx-auto mb-4 animate-spin" />
            <p className="text-gray-600">正在验证访问权限...</p>
          </div>
        </div>
      </div>
    )
  }

  // 如果IP不在白名单中，不渲染任何内容（会被useEffect跳转）
  if (isAllowed === false) {
    return null
  }

  // 渲染标签页内容
  const renderTabContent = () => {
    switch (activeTab) {
      case 'kafka':
        return <KafkaConfig />
      case 'ksql':
        return <KsqlConfig />
      case 'whitelist':
        return <IpWhitelistConfig />
      default:
        return <KafkaConfig />
    }
  }

  return (
    <div className="space-y-8">
      {/* 页面标题 */}
      <div className="text-center lg:text-left">
        <h1 className="text-3xl font-bold gradient-text mb-2">系统设置</h1>
        <p className="text-lg text-gray-600">配置Kafka连接、KSQL服务和安全策略</p>
      </div>

      {/* 标签页导航 */}
      <div className="card">
        <div className="card-content p-0">
          <nav className="flex flex-col sm:flex-row sm:space-x-1 p-2 bg-gray-50 rounded-lg">
            {tabs.map((tab) => {
              const Icon = tab.icon
              const isActive = activeTab === tab.id

              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`group inline-flex items-center justify-center sm:justify-start py-3 px-4 rounded-md font-medium text-sm transition-all duration-200 ${
                    isActive
                      ? 'bg-white text-primary-600 shadow-sm border border-primary-200'
                      : 'text-gray-600 hover:text-gray-900 hover:bg-white/50'
                  }`}
                >
                  <Icon className={`mr-2 h-5 w-5 ${
                    isActive ? 'text-primary-500' : 'text-gray-400 group-hover:text-gray-600'
                  }`} />
                  {tab.name}
                </button>
              )
            })}
          </nav>
        </div>
      </div>

      {/* 标签页描述 */}
      <div className="card bg-gradient-to-r from-primary-50 to-blue-50 border-primary-200">
        <div className="card-content">
          <div className="flex items-center space-x-3">
            <Activity className="w-5 h-5 text-primary-600" />
            <p className="text-sm font-medium text-primary-800">
              {tabs.find(tab => tab.id === activeTab)?.description}
            </p>
          </div>
        </div>
      </div>

      {/* 标签页内容 */}
      <div className="space-y-8">
        {renderTabContent()}
      </div>
    </div>
  )
}
